﻿<!doctype html><!--[if lt IE 7 ]>

<html lang="en" class="ie6">



<![endif]--><!--[if IE 7 ]>

<html lang="en" class="ie7">



<![endif]--><!--[if IE 8 ]>

<html lang="en" class="ie8">



<![endif]--><!--[if IE 9 ]>

<html lang="en" class="ie9">



<![endif]--><!--[if !IE]>

<!-->

<html lang="en">



<!--<![endif]-->



<head>

<title>我的大学</title>

<meta name="viewport" content="width = 1050, user-scalable = no" />
	<link  href="css/music.css"  rel="stylesheet" type="text/css">>
<link href="css/magazine.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery.min.1.7.js"></script>

<script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>

<script type="text/javascript" src="js/hash.js"></script>

<script type="text/javascript" src="js/turn.js"></script>

<script type="text/javascript" src="js/turn.html4.min.js"></script>

<script type="text/javascript" src="js/zoom.min.js"></script>

<script type="text/javascript" src="js/magazine.js"></script>

<script>

$(function(){

var next_button = $(".next-button");              //初始化左右箭头

var previous_button = $(".previous-button");

setArrows();

});



</script>

</head>



<body>
<div id="lanren" style="display: none;">
	<div id="audio-btn" class="on" onclick="lanren.changeClass(this,'media')">
		<audio loop="loop" src="music/01.mp3" id="media" preload="preload"></audio>
	</div>
</div>

<div id="canvas">

	<!-- 右上角放大缩小按钮 -->

	<div class="zoom-icon zoom-icon-in">

	</div>

	<div class="magazine-viewport">

		<div class="container">

			<div class="magazine">

				<!-- Next button --></div>

		</div>

		<div ignore="1" class="next-button">

		</div>

		<!-- Previous button -->

		<div ignore="1" class="previous-button">

		</div>

	</div>

	<script type="text/javascript">

function loadApp() {

 	$('#canvas').fadeIn(1000);

 	var flipbook = $('.magazine');

 	// Check if the CSS was already loaded	

	if (flipbook.width()==0 || flipbook.height()==0) {

		setTimeout(loadApp, 10);

		return;

	}	

	// 创建flipbook

	flipbook.turn({			

			width: 1200,

  			height: 781,

			duration: 1000,   //翻页速度，值越小越快

			// Hardware acceleration

			acceleration: !isChrome(),

			// Enables gradients

			gradients: true,			

			// Auto center this flipbook

			autoCenter: true,

			// Elevation from the edge of the flipbook when turning a page

			elevation: 50,

			// The number of pages

			pages: 7,

			// Events

			when: {

				turning: function(event, page, view) {					

					var book = $(this),

					currentPage = book.turn('page'),

					pages = book.turn('pages');			

					// Update the current URI

					Hash.go('page/' + page).update();

					// Show and hide navigation buttons

					disableControls(page); 				

				},

				turned: function(event, page, view) {

					disableControls(page);

					$(this).turn('center');

					if (page==1) { 

						$(this).turn('peel', 'br');

					}

				},

				missing: function (event, pages) {

					// Add pages that aren't in the magazine

					for (var i = 0; i < pages.length; i++)

						addPage(pages[i], $(this));

				}

			}

	});



	// Zoom.js

	$('.magazine-viewport').zoom({

		flipbook: $('.magazine'),

		max: function() { 			

			return largeMagazineWidth()/$('.magazine').width();

		}, 

		when: {

			swipeLeft: function() {

				$(this).zoom('flipbook').turn('next');

			},

			swipeRight: function() {				

				$(this).zoom('flipbook').turn('previous');

			},



			resize: function(event, scale, page, pageElement) {

				if (scale==1)

					loadSmallPage(page, pageElement);

				else

					loadLargePage(page, pageElement);

			},

			zoomIn: function () {

				$('.made').hide();

				$('.magazine').removeClass('animated').addClass('zoom-in');

				$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');				

				if (!window.escTip && !$.isTouch) {

					escTip = true;

					$('<div />', {'class': 'exit-message'}).

						html('<div>Press ESC to exit</div>').

							appendTo($('body')).

							delay(2000).

							animate({opacity:0}, 500, function() {

								$(this).remove();

							});

				}

			},

			zoomOut: function () {

				$('.exit-message').hide();

				$('.thumbnails').fadeIn();

				$('.made').fadeIn();

				$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');

				setTimeout(function(){

					$('.magazine').addClass('animated').removeClass('zoom-in');

					resizeViewport();

				}, 0);

			}

		}

	});


	// Zoom event

	if ($.isTouch)

		$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);

	else

		$('.magazine-viewport').bind('zoom.tap', zoomTo);

	// Using arrow keys to turn the page

	$(document).keydown(function(e){

		var previous = 37, next = 39, esc = 27;

		switch (e.keyCode) {

			case previous:

				// left arrow

				$('.magazine').turn('previous');

				e.preventDefault();

			break;

			case next:

				//right arrow

				$('.magazine').turn('next');

				e.preventDefault();

			break;

			case esc:				

				$('.magazine-viewport').zoom('zoomOut');	

				e.preventDefault();

			break;

		}

	});


//音乐控制部分
    var lanren = {
        changeClass: function (target,id) {
            var className = $(target).attr('class');
            var ids = document.getElementById(id);
            (className == 'on')
                ? $(target).removeClass('on').addClass('off')
                : $(target).removeClass('off').addClass('on');
            (className == 'on')
                ? ids.pause()
                : ids.play();
        },
        play:function(){
            document.getElementById('media').play();
        }
    }
    lanren.play();

	// URIs - Format #/page/1 

	Hash.on('^page\/([0-9]*)$', {

		yep: function(path, parts) {

			var page = parts[1];

			if (page!==undefined) {

				if ($('.magazine').turn('is'))

					$('.magazine').turn('page', page);

			}

		},

		nop: function(path) {

			if ($('.magazine').turn('is'))

				$('.magazine').turn('page', 1);

		}

	});

	$(window).resize(function() {

		resizeViewport();

	}).bind('orientationchange', function() {

		resizeViewport();

	});

	

	// Events for thumbnails

	$('.thumbnails').click(function(event) {		

		var page;

		if (event.target && (page=/page-([0-9]+)/.exec($(event.target).attr('class'))) ) {		

			$('.magazine').turn('page', page[1]);

		}

	});

	$('.thumbnails li').

		bind($.mouseEvents.over, function() {			

			$(this).addClass('thumb-hover');



		}).bind($.mouseEvents.out, function() {

			

			$(this).removeClass('thumb-hover');



		});



	if ($.isTouch) {	

		$('.thumbnails').

			addClass('thumbanils-touch').

			bind($.mouseEvents.move, function(event) {

				event.preventDefault();

			});

	} else {

		$('.thumbnails ul').mouseover(function() {

			$('.thumbnails').addClass('thumbnails-hover');

		}).mousedown(function() {

			return false;

		}).mouseout(function() {

			$('.thumbnails').removeClass('thumbnails-hover');

		});

	}



	// Regions

	if ($.isTouch) {

		$('.magazine').bind('touchstart', regionClick);

	} else {

		$('.magazine').click(regionClick);

	}



	// Events for the next button

	$('.next-button').bind($.mouseEvents.over, function() {		

		$(this).addClass('next-button-hover');

	}).bind($.mouseEvents.out, function() {		

		$(this).removeClass('next-button-hover');

	}).bind($.mouseEvents.down, function() {		

		$(this).addClass('next-button-down');

	}).bind($.mouseEvents.up, function() {		

		$(this).removeClass('next-button-down');

	}).click(function() {

		$('.magazine').turn('next');

		setTimeout(function(){

		setArrows() ;

		},300);

	});



	// Events for the next button	

	$('.previous-button').bind($.mouseEvents.over, function() {		

		$(this).addClass('previous-button-hover');

	}).bind($.mouseEvents.out, function() {		

		$(this).removeClass('previous-button-hover');

	}).bind($.mouseEvents.down, function() {		

		$(this).addClass('previous-button-down');

	}).bind($.mouseEvents.up, function() {		

		$(this).removeClass('previous-button-down');

	}).click(function() {		

		$('.magazine').turn('previous');

		setTimeout(function(){

		setArrows() ;

		},300);



	});

	resizeViewport();

	$('.magazine').addClass('animated');

}



// Zoom icon

 $('.zoom-icon').bind('mouseover', function() {  	

 	if ($(this).hasClass('zoom-icon-in'))

 		$(this).addClass('zoom-icon-in-hover');

 	if ($(this).hasClass('zoom-icon-out'))

 		$(this).addClass('zoom-icon-out-hover'); 

 }).bind('mouseout', function() {  	

 	 if ($(this).hasClass('zoom-icon-in'))

 		$(this).removeClass('zoom-icon-in-hover'); 	

 	if ($(this).hasClass('zoom-icon-out'))

 		$(this).removeClass('zoom-icon-out-hover');

 }).bind('click', function() {

 	if ($(this).hasClass('zoom-icon-in'))

 		$('.magazine-viewport').zoom('zoomIn');

 	else if ($(this).hasClass('zoom-icon-out'))	

		$('.magazine-viewport').zoom('zoomOut');

 });

 $('#canvas').hide();



// Load the HTML4 version if there's not CSS transform

yepnope({

	test : Modernizr.csstransforms,

	yep: ['js/turn.js'],

	nope: ['js/turn.html4.min.js'],

	both: ['js/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],

	complete: loadApp

});



</script>



</div>
</body>



</html>




</html>



</html>



</html>



</html>

